<!-- 配置好的大屏列表显示 -->
<template>
  <v-scale-screen :width="win.screen.width" :height="win.screen.height" fullScreen :delay="500"
    style="margin:0;padding:0;position:relative;z-index:1;">
    <!-- <video src="../../../static/videoBack6.mp4" autoplay loop controls="no" ref="videoBack"
			style="width:100%;height:100%;" class="videoBack"></video> -->
    <div class="page" id="page">
      <!-- 1.顶部的标题 -->
      <!-- <div class="twelve twelve_content"></div> -->
      <div class="titleBar titleBar1"
        :style="{ 'background-image': 'url(' + allData.zero.title_img + ')', 'color': allData.zero.title_color, 'background-color': allData.zero.back_color }">
        <span style="float:left; font-size: .4rem;">{{ nowtime }}</span>
        <span class="titleName"
          :style="{ 'font-size': allData.zero.title_size + 'rem', 'letter-spacing': allData.zero.title_spacing + 'rem' }">
          {{
            allData.zero.title_name }}</span>
        <div>
          <div class="changeWin exit" @click="changeScreen" v-if="screenThree">
            <!-- <i class="iconfont icon-quxiaoquanping" title=jjjj"取消全屏"></i> -->
            <img src="../../static/icon4.png" alt="" title="取消全屏" />
          </div>
          <div class=" changeWin exit" v-if="!screenThree" @click="changeScreen">
            <img src="../../static/icon5.png" alt="" title="全屏显示 " />
          </div>
          <div class="exit" @click="goExit">
            <i class="el-icon-s-fold"></i>控制台
          </div>
          <div class="exit" @click="goDataLarge" style="margin-right: .4rem;">
            <i class="el-icon-s-platform"></i>监控中心
          </div>
          <!-- <div class="exit" @click="changeMining" style="margin-right: .4rem;">
            切换项目 <i class="el-icon-caret-bottom"></i>
          </div> -->
        </div>
      </div>

      <div class="optionListBox" v-show="optionList">
        <div class="oneView" :class="optionId == item.id ? 'active_2' : ''" v-for="item in options" :key="item.id"
          @click="changeOption(item, $event)">
          <span>{{ item.product_name }}</span>
        </div>
        <!-- {{ options }} -->
      </div>
      <!-- 1.左上角第一个 -->
      <div class="one every_content z_999"
        :style="{ 'background-color': allData.zero.back_color, 'border-radius': allData.zero.border_radius + 'px', }">
        <component style="border: 0px solid red;" :is="allData.zero.border_style" :dur="allData.zero.dur">
          <div class="every_content_title">
            <div :style="{ 'background-color': allData.zero.in_color }"></div>
            <div :style="{ 'color': allData.zero.small_title_color }">{{ allData.one.content_title }}</div>
          </div>
          <div class="content_data">
            <cAssembly1 :cId1="allData.one" ref="childRef1" style="width: 100% !important;height: 100% !important; ">
            </cAssembly1>
          </div>
        </component>
      </div>
      <!-- 2.左侧上面的第二个 -->
      <div class="two every_content z_999"
        :style="{ 'background-color': allData.zero.back_color, 'border-radius': allData.zero.border_radius + 'px', }">
        <component style="border: 0px solid red;" :is="allData.zero.border_style" :dur="allData.zero.dur">
          <div class="every_content_title">
            <div :style="{ 'background-color': allData.zero.in_color }"></div>
            <div :style="{ 'color': allData.zero.small_title_color }">{{ allData.two.content_title }}</div>
          </div>
          <div class="content_data">
            <cAssembly2 :cId2="allData.two" ref="childRef2" style="width: 100% !important;height: 100% !important;">
            </cAssembly2>
          </div>
        </component>
      </div>
      <!-- 3.左侧上面的第三个 -->
      <div class="three every_content z_999"
        :style="{ 'background-color': allData.zero.back_color, 'border-radius': allData.zero.border_radius + 'px', }">
        <component style="border: 0px solid red;" :is="allData.zero.border_style" :dur="allData.zero.dur">
          <div class="every_content_title">
            <div :style="{ 'background-color': allData.zero.in_color }"></div>
            <div :style="{ 'color': allData.zero.small_title_color }"> {{ allData.three.content_title }}</div>
          </div>
          <div class="content_data">
            <cAssembly3 :cId3="allData.three" ref="childRef3" style="width: 100% !important;height: 100% !important;">
            </cAssembly3>
          </div>
        </component>
      </div>
      <!-- 4.中间下面实时数据显示 -->
      <!-- 四边的阴影 -->
      <!-- <div class="to_top"></div>
      <div class="to_right"></div>
      <div class="to_left"></div>
      <div class="to_bottom"></div> -->
      <div class="four every_content z_999"
        :style="{ 'background-color': allData.zero.back_color, 'border-radius': allData.zero.border_radius + 'px', }">
        <component style="border: 0px solid red;" :is="allData.zero.border_style" :dur="allData.zero.dur">
          <div class="every_content_title">
            <div :style="{ 'background-color': allData.zero.in_color }"></div>
            <div :style="{ 'color': allData.zero.small_title_color }">{{ allData.four.content_title }}</div>
          </div>
          <div class="content_data">
            <cAssembly4 :cId4="allData.four" ref="childRef4" style="width: 100% !important;height: 100% !important;">
            </cAssembly4>
          </div>
        </component>
      </div>
      <!-- 5.右下角的部分 -->
      <div class="five every_content z_999"
        :style="{ 'background-color': allData.zero.back_color, 'border-radius': allData.zero.border_radius + 'px', }">
        <component style="border: 0px solid red;" :is="allData.zero.border_style" :dur="allData.zero.dur">
          <div class="every_content_title">
            <div :style="{ 'background-color': allData.zero.in_color }"></div>
            <div :style="{ 'color': allData.zero.small_title_color }">{{ allData.five.content_title }}</div>
          </div>
          <div class="content_data">
            <cAssembly5 :cId5="allData.five" ref="childRef5" style="width: 100% !important;height: 100% !important;">
            </cAssembly5>
          </div>
        </component>
      </div>
      <!-- 6.右边下面的部分 -->
      <div class="six every_content z_999"
        :style="{ 'background-color': allData.zero.back_color, 'border-radius': allData.zero.border_radius + 'px', }">
        <component style="border: 0px solid red;" :is="allData.zero.border_style" :dur="allData.zero.dur">
          <div class="every_content_title">
            <div :style="{ 'background-color': allData.zero.in_color }"></div>
            <div :style="{ 'color': allData.zero.small_title_color }">{{ allData.six.content_title }}</div>
          </div>
          <div class="content_data">
            <cAssembly6 :cId6="allData.six" ref="childRef6" style="width: 100% !important;height: 100% !important;">
            </cAssembly6>
          </div>
        </component>
      </div>
      <!-- 7.右上角的天气 -->
      <div class="seven every_content z_999"
        :style="{ 'background-color': allData.zero.back_color, 'border-radius': allData.zero.border_radius + 'px', }">
        <component style="border: 0px solid red;" :is="allData.zero.border_style" :dur="allData.zero.dur">
          <div class="every_content_title">
            <div :style="{ 'background-color': allData.zero.in_color }"></div>
            <div :style="{ 'color': allData.zero.small_title_color }">{{ allData.seven.content_title }}</div>
          </div>
          <div class="content_data">
            <cAssembly7 :cId7="allData.seven" ref="childRef7" style="width: 100% !important;height: 100% !important;">
            </cAssembly7>
          </div>
        </component>
      </div>
      <!-- 8.地图容器 -->
      <div class="eight every_content z_999" id="mapBox"></div>

    </div>

    <div v-show="showView" id="viewBox">
      <div class="viewbtn_2" ref="viewBtn">
        <i class="el-icon-full-screen" v-if="!screenThree" title="全屏显示" @click="changeScreen"></i>
        <i class="el-icon-copy-document" v-else title="退出全屏" @click="changeScreen"></i>
        <i class="el-icon-refresh" title="刷新数据" @click="refreshViewData"></i>
        <i class="el-icon-circle-close" title="返回大屏" @click="showView = false"></i>
      </div>
      <iframe class="viewContent" frameborder="no" ref="viewFrame" scr=""></iframe>
    </div>
  </v-scale-screen>
</template>

<script>
import cAssembly1 from '../templates/ChartAssembly1.vue';
import cAssembly2 from '../templates/ChartAssembly2.vue';
import cAssembly3 from '../templates/ChartAssembly3.vue';
import cAssembly4 from '../templates/ChartAssembly4.vue';
import cAssembly5 from '../templates/ChartAssembly5.vue';
import cAssembly6 from '../templates/ChartAssembly6.vue';
import cAssembly7 from '../templates/ChartAssembly7.vue';
export default {
  name: "largeScreen",
  components: {
    cAssembly1,
    cAssembly2,
    cAssembly3,
    cAssembly4,
    cAssembly5,
    cAssembly6,
    cAssembly7,
  },
  data() {
    return {
      win: window,
      Socket: null,
      baseurl: this.$baseurl,
      timer: null,
      fullScreen: false,
      screenThree: false,
      titleName: "大屏标题",
      // 右上角的文字
      right_top: "关闭全屏",

      nowtime: "",
      nowTimer: null,
      fromRouter: {
        name: "",
        path: ""
      },
      // 项目的所有数据
      options: [],
      // 控制切换项目的显示
      optionList: false,
      // 当前园区的id
      optionId: localStorage.getItem("park_id"),
      optionName: "",
      refresh: null,

      // 1.园区的信息
      park_info: {
        park_describe: "",
        park_image: ""
      },
      //主内容底层地图相关变量
      //真实数据不可删
      map: null,
      markers: [
        {
          point: [108.98111, 34.249392],
          id: 130,
          name: "西二楼锅炉房"
        },
        {
          point: [108.98022, 34.248536],
          id: 101,
          name: "西二楼换热站"
        },
        {
          point: [108.98324, 34.249685],
          id: 100,
          name: "中一楼换热站"
        },
        {
          point: [108.984004, 34.247404],
          id: 194,
          name: "图书馆换热"
        },
        {
          point: [108.986193, 34.250437],
          id: 182,
          name: "东一楼换热站"
        },
        {
          point: [108.987255, 34.248814],
          id: 193,
          name: "东三楼换热站"
        },
        {
          point: [108.987877, 34.247271],
          id: 171,
          name: "北四楼供热"
        },
        {
          point: [108.987662, 34.246065],
          id: 131,
          name: "北二楼供热"
        },
        {
          point: [108.985957, 34.243369],
          id: 127,
          name: "交大南区供热"
        },
        {
          point: [108.992343, 34.24957],
          id: 126,
          name: "交大一村供热"
        }
      ],
      mask: [

        [108.979348, 34.251057],
        [108.996747, 34.251121],
        [108.996722, 34.240104],
        [108.979287, 34.240161]
      ],
      //组态相关函数
      showView: false,
      stageId: 0,

      // 所有的数据
      allData: {

      }
    };
  },


  beforeRouteEnter(to, from, next) {
    next(vm => {
      // console.log("from", vm.fromRouter;
      vm.fromRouter.name = from.name;
      vm.fromRouter.path = from.path;
    });
  },

  created() {
    var that = this;
    // 拿到园区下拉下拉的信息
    that.getParkName();
    that.getScreenConfig()
  },

  mounted() {
    var that = this;
    // 延时显示大屏  让边框置于最外层
    setTimeout(function () {
      that.changeScreen();
    }, 300);
    setTimeout(function () {
      that.initShowMap();
    }, 2300);
    //    // setTimeout(() => {}, 500);

    //    // setTimeout(() => {}, 1500);
    this.nowTimer = setInterval(function () {
      if (window.screen.width > 1440) {
        that.nowtime = that.getNowTime(true);
      } else {
        that.nowtime = that.getNowTime(false);
      }
    }, 1000);
    //this.$nextTick(function() {

    //});
  },
  methods: {
    // 大屏的配置信息
    getScreenConfig() {
      var that = this;
      this.$http({
        method: "post",
        url: "api/screen/detail",
        data: {
          id: 1,
        }
      }).then(res => {
        console.log('查询配置数据', res);
        if (res && res.data.result == "success") {
          that.allData = JSON.parse(res.data.data.screen_config);
          console.log('alldata', that.allData)

          // 判断某请求内容有没有,有的话要发起请求   
          // 如果有的话就查询  没有的话就去显示具体的数值

          setTimeout(() => {
            that.$refs.childRef1.showOption();
            that.$refs.childRef2.showOption();
            that.$refs.childRef3.showOption();
            that.$refs.childRef4.showOption();
            that.$refs.childRef5.showOption();
            that.$refs.childRef6.showOption();
            that.$refs.childRef7.showOption();
          }, 1800)

        }
      })
        .catch(error => {
          console.log(error);
        });
    },
    // 大小屏切换
    changeScreen() {
      var that = this;
      //this.screenThree =document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
      //不能用page，将引起下拉框无法显示
      //var content = this.$refs.page;
      var content = document.documentElement;
      if (!this.screenThree) {
        //进入全屏,多重短路表达式
        (content.requestFullscreen && content.requestFullscreen()) ||
          (content.mozRequestFullScreen && content.mozRequestFullScreen()) ||
          (content.webkitRequestFullscreen &&
            content.webkitRequestFullscreen()) ||
          (content.msRequestFullscreen && content.msRequestFullscreen());
        this.screenThree = true;
      } else {
        //CancelFullScreen?document.mozCancelFullScreen():
        document.exitFullscreen
          ? document.exitFullscreen()
          : document.mozCancelFullScreen
            ? document.mozCancelFullScreen()
            : document.webkitExitFullscreen
              ? document.webkitExitFullscreen()
              : "";

        this.screenThree = false;
      }
    },

    //数据大屏
    goDataLarge() {
      this.$router.push({
        name: "showData",
        path: "showData"
      });
    },
    // 拿下拉内容
    getParkName() {
      var that = this;
      this.$http({
        method: "post",
        url: "api/product/all",
        data: {}
      })
        .then(res => {
          // console.log('所有报表列表', res);
          if (res && res.data.result == "success") {
            that.options = res.data.data;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 默认设置时间
    getNowFormatDate() {
      //获取当前年月日
      var date = new Date();
      var seperator1 = "-";
      // var seperator2 = ":";
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var strDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var currentdate = date.getFullYear() + seperator1 + month;

      return currentdate;
    },
    // 右上角关闭
    goExit() {
      var that = this;
      // console.log("this.fromRouter.name", this.fromRouter);
      this.screenThree = true
      clearInterval(that.timer);
      if (this.Socket) {
        this.Socket.close();
        this.Socket = null;
      }


      if (
        this.fromRouter.name == "mainData" ||
        this.fromRouter.name == "showData" ||
        this.fromRouter.name == "Login" ||
        this.fromRouter.name == "configLarge" ||
        this.fromRouter.name == "mainView"
      ) {
        this.$router.push({
          name: "device",
          path: "device"
        });
        localStorage.setItem("indexPath", "7-1");
      } else {
        this.$router.push({
          name: "device",
          path: "device"
        });
        localStorage.setItem("indexPath", "7-1");
        // this.$router.push({
        //   name: that.fromRouter.name,
        //   path: that.fromRouter.path
        // });

        // localStorage.setItem("indexPath", "3-2");
      }

      this.changeScreen();
    },
    // 点击切换项目
    changeMining() {
      var that = this;
      if (this.timeoutId) {
        clearTimeout(this.timeoutId);
      }
      that.optionList = !this.optionList;

      that.timeoutId = setTimeout(function () {
        // that.optionList = false;
      }, 5000);
    },
    // 选择项目
    changeOption(item, e) {
      setTimeout(function () {
        that.optionList = false;
      }, 100);
      var that = this;
      this.optionId = item.id;
      localStorage.setItem("park_id", item.id);
      this.optionName = item.product_name;
      // 切换项目后的操作
      setTimeout(() => {
        // // 0.拿设备类型数量
        // that.deviceCount()
        // // 查园区下面的设备
        // that.getDevice()
        // // 1园区简介
        // that.parkInfo()
        // // 2.种植信息
        // that.getPlanInfo()
      }, 200);
      setTimeout(() => { }, 1700);
      // 切换之后的一系列操作
      // await this.getEquip(this.optionId);
      //this.lineForm.device = [];
      // if (this.topTab != "data") {
      //     setTimeout(function () {
      //         that.chooseTab(that.topTab);
      //     }, 1000);
      // }
    },

    //主内容中心地图相关函数
    //标记函数
    addMarker(oneMark) {
      var that = this;
      var marker = new AMap.Marker({
        map: that.map,
        icon: new AMap.Icon({
          size: [32, 32],
          imageSize: [32, 32],
          image: "../../static/local2.png"
        }),
        position: oneMark.point,
        offset: new AMap.Pixel(-16, -32),
        label: {
          content: oneMark.name,
          offset: new AMap.Pixel(-4, -10),
          direction: "right"
        }
      });

      marker.on("click", function () {
        //window.location.href = 'static/jyzt/client_view.html?stageId='+oneMark.id;
        that.stageId = oneMark.id;
        that.showView = true;
        that.$refs.viewFrame.src =
          "../../static/jyzt/client_view.html?stageId=" + oneMark.id;
      });
      this.map.add(marker);
    },

    //初始化函数
    initShowMap() {
      var that = this;
      this.map = new AMap.Map("mapBox", {
        //mask: that.mask,
        // center: [108.988218, 34.246564],
        viewMode: "3D",
        //showLabel:true,
        showBuildingBlock: true,
        labelzIndex: 10,
        pitch: 40,
        resizeEnable: true,
        expandZoomRange: true,
        zoom: 16.2,
        zooms: [3, 20],
        showRoad: true,
        terrain: true,
        skyColor: "#123A51",
        //features:['point','road','building'],
        layers: [
          //new AMap.TileLayer.RoadNet({
          //zIndex:20
          // }),
          // new AMap.TileLayer.Satellite()
          // new AMap.TileLayer({
          // zIndex:6,
          // opacity:1,
          // getTileUrl:'https://t{1,2,3,4}.tianditu.gov.cn/DataServer?T=ter_w&x=[x]&y=[y]&l=[z]'
          // })
        ]
      });

      //this.map.setMapStyle("amap://styles/c076582da8a2694df4142e70cb3c206e");
      this.map.setMapStyle(`amap://styles/${this.allData.eight.mapStyle}`);
      for (let i = 0; i < this.markers.length; i++) {
        this.addMarker(this.markers[i]);
      }
      setTimeout(function () {
        that.map.setFitView();
      }, 500);
      var outer = [
        new AMap.LngLat(-360, 90, true),
        new AMap.LngLat(-360, -90, true),
        new AMap.LngLat(360, -90, true),
        new AMap.LngLat(360, 90, true)
      ];
      var pathArray = [outer];
      pathArray.push.apply(pathArray, that.mask);


    },

    //只刷新组态数据的函数
    refreshViewData() {
      this.$http({
        method: "post",
        url: "api/draw/refresh",
        data: {
          id: this.stageId
        }
      })
        .then(res => {
          if (res && res.data.result == "success") {
            this.$message({
              type: "info",
              message: "图纸数据已刷新"
            });
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  // 关闭页面
  beforeDestroy() {
    clearInterval(this.refresh);
  }
};
</script>

<style scoped>
@media all and (max-width: 1440px) {
  .titleName {
    font-size: 0.4rem !important;
  }

  .pie_title>span,
  .alarm_head>span {
    font-size: 0.16rem !important;
  }
}

.page {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  /* margin-top: 0.02rem; */
  /* border: 1px solid red; */
  box-sizing: border-box;
  font-size: 0.62rem;
  color: #eee;
  /* background-color: #000; */
  /* background-color: #4ac294; */
  background-image: url(../../static/blue.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: -webkit-grid;
  -webkit-grid-template-columns: repeat(24, 1fr);
  -webkit-grid-template-rows: repeat(24, 1fr);
  -webkit-grid-gap: 10px;
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: repeat(24, 1fr);
  grid-gap: 10px;
}

/* .page::after {
  content: "";

  opacity: 0.2;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
} */

/* 整个选择框的样式 */
.optionListBox {
  min-width: 4rem;
  max-width: 6rem;
  font-size: 0.6rem;
  color: #eee;
  /* position: absolute; */
  top: 1.4rem;
  right: 4.6rem;
  height: auto;
  /* background-color: rgba(0, 0, 0, 0.3); */
  padding: 0.1rem;
  /* transition:all 500ms linear; */
  z-index: 9999999 !important;
  min-height: 60px;
  position: fixed;
  /* top: 1.4rem; */
  /* background-color: #4c524be3; */
  background-color: #57888d;
  border-radius: 0.1rem;
}

/* 未选中的通用样式 */
.oneView {
  width: 100%;
  height: 0.8rem;
  line-height: 0.8rem;
  margin-top: 0.2rem;
  text-align: center;
  cursor: pointer;
  border-radius: 4px;
  padding: 0 0.2rem;
  border: 2px;
  box-sizing: border-box;
  border: 2px solid transparent;
  font-size: 0.4rem;
}

.oneView:hover {
  border: 2px solid #c4c7d1;
  box-sizing: content-box;
}

.oneView:first-child {
  margin-top: 0;
}

/* 当前选中的项目 */
.active_2 {
  color: #fff !important;
  background-color: #316277;
  /* border: 2px solid #bcc083; */
  box-sizing: border-box;
}

.exitIcon {
  /* display: inline-block;
    width: 0.2rem;
    height: 0.2rem;
    line-height: 0.2rem;
    text-align: center;
    vertical-align: middle;
    padding-top: 2px;
    margin-right: 0.1rem; */
  font-weight: 700;
}

@keyframes animate {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* .titleBar {
    width: 100%;
    height: 1rem;
    line-height: 1rem;
    position: relative;
    z-index: 999;
    color: #fff;
    padding: 0 0.2rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;

} */

.titleBar1 {
  grid-column: 1/25;
  grid-row: 1/3;
  /* border: 1px solid #f80404; */
  position: relative;
  z-index: 99999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.4rem;
  /* background-image: url("../../static/title_01.png"); */
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
}

.titleName {
  display: inline-block;
  width: 50%;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  /* top: .2rem; */
  z-index: 2;
  transform: translateX(-50%);
  height: 0.8rem;
  line-height: 0.8rem;
  /* font-size: 0.8rem; */
  font-weight: 700;
  /* letter-spacing: 0.04rem; */
  text-shadow: 6px 6px 6px rgba(0, 0, 0, 1) !important;
  /* border: 1px solid red; */
}

.exit {
  width: 2.3rem;
  float: right;
  /* margin-top: 0.38rem; */
  text-align: center;
  padding: 0;
  height: 0.4rem;
  line-height: 0.4rem;
  font-size: 0.44rem;
  display: flex;
  align-items: center;
  /* justify-content: space-around; */
  font-weight: 600;
  /* font-family: 'Microsoft YaHei', sans-serif; */
  cursor: pointer;
  /* background-color: #0c285B; */
  color: #fff;
  /* border: 2px solid rgb(97 97 196); */
  border-radius: 6px;
  z-index: 9999;
}

.exit>i {
  font-size: 0.4rem !important;
  margin-right: 0.1rem;
  height: 0.4rem;
  line-height: 0.4rem;
}

.exit>img {
  width: 0.4rem;
  height: 0.4rem;
}

.exit:hover {
  background-color: #0c285b;
  color: #fff;
  /* border: 2px solid rgb(97 97 196); */
  border-radius: 6px;
  z-index: 9999;
}

.exit:hover i {
  /* color: deepskyblue !important; */
}

.changeWin {
  width: 0.5rem;
  z-index: 999999 !important;
  color: red !important;
  font-size: 0.4rem !important;
}

.changeWin>img {
  width: 0.5rem;
  height: 0.5rem;
}

.changeWin:hover {
  color: #0c285b !important;
}

.exit>>>.el-icon-s-fold {
  font-size: 0.2rem;
}

.exit:hover {
  background-color: transparent;
  color: #52a182;
}

.exit:hover i {
  /* color: deepskyblue !important; */
}

/* grid */
.content {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  /* display: flex;
    align-items: center;
    justify-content: space-between; */
  /* margin-top: 0.02rem; */
  /* border: 2px solid red; */
  box-sizing: border-box;
  font-size: 0.32rem;
  color: #eee;

  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: repeat(24, 1fr);
  grid-gap: 10px;
}

/* .shadow {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 999;
    box-shadow: inset 0 0 10px rgba(7, 41, 113, 0.9),
        inset 0 0 20px rgba(15, 60, 118, 0.9),
        inset 0 0 30px rgba(27, 54, 129, 0.9);
} */
.z_999 {
  z-index: 999 !important;
}

/* 左侧的 */
.one {
  grid-column: 1/7;
  grid-row: 3/9;
}

.two {
  grid-column: 1/7;
  grid-row: 9/17;
}

.three {
  grid-column: 1/7;
  grid-row: 17/25;
}

.eight {
  grid-column: 1/25 !important;
  grid-row: 1/25 !important;
  z-index: 99 !important;
}

.four {
  grid-column: 7/19;
  grid-row: 18/25;
  /* background-image: linear-gradient(
    to top,
    rgba(12, 21, 25, 1),
    rgba(12, 21, 25, 0.7),
    rgba(12, 21, 25, 0.6),
    rgba(12, 21, 25, 0.5),
    rgba(12, 21, 25, 0)
  ); */
}

.to_top,
.to_right,
.to_left,
.to_bottom {
  /* grid-column: 7/19; */
  z-index: 99;
}

.to_top {
  grid-column: 1/25;
  grid-row: 17/25;
  background-image: linear-gradient(to top,
      rgb(3, 54, 77),
      rgba(66, 118, 141, 0.7),
      rgba(88, 130, 148, 0.6),
      rgba(86, 110, 120, 0.5),
      rgba(46, 50, 51, 0));
}

.to_bottom {
  grid-column: 1/25;
  grid-row: 1/6;
  background-image: linear-gradient(to bottom,
      rgb(3, 54, 77),
      rgba(66, 118, 141, 0.7),
      rgba(88, 130, 148, 0.6),
      rgba(86, 110, 120, 0.5),
      rgba(46, 50, 51, 0));
}

.to_left {
  grid-column: 18/25;
  grid-row: 1/25;
  background-image: linear-gradient(to left,
      rgb(3, 54, 77),
      rgba(66, 118, 141, 0.7),
      rgba(88, 130, 148, 0.6),
      rgba(86, 110, 120, 0.5),
      rgba(46, 50, 51, 0));
}

.to_right {
  grid-column: 1/8;
  grid-row: 1/25;
  background-image: linear-gradient(to right,
      rgb(3, 54, 77),
      rgba(66, 118, 141, 0.7),
      rgba(88, 130, 148, 0.6),
      rgba(86, 110, 120, 0.5),
      rgba(46, 50, 51, 0));
}

/* 右侧的 */
.seven {
  grid-column: 19/25;
  grid-row: 3/9;
}

.six {
  grid-column: 19/25;
  grid-row: 9/17;
}

.five {
  grid-column: 19/25;
  grid-row: 17/25;
  /* grid-column: 9/9;
    grid-row: 9/9; */
}

.twelve {
  grid-column: 1/25;
  grid-row: 1/25;
  z-index: 999;
  background: linear-gradient(to bottom,
      rgb(43, 115, 145, 1),
      rgba(43, 115, 145, 0.7),
      rgba(43, 115, 145, 0.6),
      rgba(43, 115, 145, 0.5),
      rgba(43, 115, 145, 0.2));
  /* 预留颜色 */
  /* background-color: #123a51; */

  /* background-image: url(../../static/blue.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%; */
}

.twelve_content {
  width: 100%;
  height: 100%;
  margin: auto 0;
  /* border: 1px solid rgb(25, 105, 175); */
  /* border: 1px solid #f80404; */
  /* z-index: 99; */
  position: relative;
}

.every_content {
  width: 100%;
  height: 100%;
  margin: auto 0;
  /* border: 1px solid rgb(25, 105, 175); */
  /* border: 1px solid red; */
  box-shadow: inset 0 0 5px rgba(81, 164, 134, 0.4),
    0 0 5px rgba(81, 164, 134, 0.4);
  /* background-color: #5bbd92; */
  /* opacity: 0.2; */
  position: relative;
}

.every_content>>>.dv-border-svg-container {
  z-index: 99 !important;
}

.every_content>>>.dv-border-box-1 .border {
  z-index: 99 !important;
}

.every_content_title {
  position: absolute;
  top: 0;
  padding-left: 3%;
  width: auto;
  height: 0.7rem;
  line-height: 0.7rem;
  color: #fff;
  /* border: 1px solid red; */
  font-size: 0.4rem;
  font-weight: bold;
  text-align: left;
  z-index: 99;
  /* border: 1px solid #11578d; */
  /* border: 1px solid #0c1519; */
  /* cursor: pointer; */
  user-select: none;
  display: flex;
  align-items: center;
  transition: transform 0.3s ease-in-out;
}

.every_content_title>div:nth-child(1) {
  width: 0.05rem;
  height: 60%;
  background-color: #5bbd92;
  margin-right: 0.1rem;
  border-radius: 0.7rem;
}

.every_content_title:hover {
  transform: scale(1.15);
}

/* 另外的标题样式  不会放大 */
.every_content_title1 {
  position: absolute;
  top: 0;
  padding: 0 2%;
  width: 96%;
  margin-left: 2%;
  height: 0.7rem;
  line-height: 0.7rem;
  color: #fff;
  /* border: 1px solid red; */
  font-size: 0.4rem;
  font-weight: bold;
  text-align: left;
  /* z-index: ; */

  user-select: none;
  display: flex;
  align-items: center;
  transition: transform 0.3s ease-in-out;
  margin-top: 0.08rem;
  box-shadow: inset 0 0 16px rgba(0, 229, 255, 0.3);
}

/* 有标题时候的下面内容样式 */
.every_content_main_y {
  width: 100%;
  height: calc(100% - 0.7rem);
  margin-top: 0.7rem;
  border: 1px solid red;

  background-image: linear-gradient(to bottom,
      rgba(43, 115, 145, 0.5),
      rgba(43, 115, 145, 0.4),
      rgba(43, 115, 145, 0.3),
      rgba(43, 115, 145, 0.3));
  /* border: 1px solid #fff; */
}

/* 没有标题时候的下面内容样式 */
.every_content_main_n {
  width: 100%;
  height: calc(100% - 0.7rem);
  margin-top: 0.9rem;
  /* border: 1px solid red; */

  background-image: linear-gradient(to bottom,
      rgba(43, 115, 145, 0.5),
      rgba(43, 115, 145, 0.4),
      rgba(43, 115, 145, 0.3),
      rgba(43, 115, 145, 0.3));
}

/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 10px;
  background-color: transparent !important;
  /* 滚动条宽度 */
}

/* 设置滚动条轨道的样式 */
::-webkit-scrollbar-track {
  background: transparent !important;
  /* background-color: #12181a !important; */
  /* background-color: rgba(43, 115, 145, .63) !important;
    opacity: .63 !important; */
  /* 滚动条轨道背景色 */
}

/* 设置滚动条滑块的样式 */
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.5);
  /* 滚动条滑块颜色 */
  /* border-radius: 6px; */
  /* 滑块圆角 */
}

/* 设置鼠标悬停在滚动条上时的样式 */
::-webkit-scrollbar-thumb:hover {
  background: #777;
  /* 滚动条滑块悬停时的颜色 */
}

.left_top {
  border: 1px solid red;
  width: 100%;
  height: calc(100% - 0.7rem);
  margin-top: 0.7rem;
}

/* 内容区底层地图 */
#mapBox {
  /* width: 100vw; */
  /* height: auto; */
  /* box-sizing: border-box; */
  /* position: absolute; */
  /* z-index: 90; */
  /* top: 1.75rem; */
  /* bottom: 0; */
  /* border: 1px solid blue; */
  /* padding-bottom:200px; */
  /* margin-top: -200px; */
}

/* 组态相关 */
#viewBox,
.viewContent {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 991;
  top: 0;
  left: 0;
  background-color: #fff;
}

.viewbtn_2 {
  display: flex;
  /* display: inline-block; */
  position: absolute;
  height: 0.6rem;
  top: 0.1rem;
  right: 0.1rem;
  z-index: 992;
  background-color: rgba(0, 0, 0, 0.3) !important;
  border: none;
  padding: 0.1rem;
  /* max-width:2.1rem; */
  max-width: 2.1rem;
  justify-content: space-between;
  align-items: center;
  border-radius: 4px;
}

/* .viewbtn_2 img {
		width: 0.4rem;
		height: 0.4rem;
		margin-right:0.15rem;
		cursor: pointer;
	} */

.viewbtn_2 i {
  color: #fff;
  font-size: 0.45rem;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

.viewbtn_2 i+i {
  margin-left: 0.15rem;
}


.content_data {
  width: 100% !important;
  height: calc(100% - 0.7rem) !important;
  top: 0.7rem;
  overflow: hidden !important;
  position: absolute;
  z-index: 10 !important;
  /* border: 1px solid blue; */
}



.d_bottom_info {
  background: linear-gradient(to top,
      rgb(11, 29, 72, 1),
      rgb(11, 29, 72, 0.6),
      rgba(255, 255, 255, 0) 70%);
}
</style>
